<template>
  <div class="filter-view" :class="isMask ? 'filter-visible' : ''" @click.self="canleMask()">
    <div class="filter">
      <div v-for="(item, index) in filterData.navTab" :key="index" :class="currentIndex == index ? 'active' : ''" @click="handleClick(item,index)">
        {{ item.name }}
        <i :class="item.icon"></i>
      </div>
    </div>
    <!-- 排序 -->
    <div v-if="filterVisible">
      <div class="list" v-for="(item, index) in filterData.sortBy" :key="index" :class="item.check ? 'colorActive' : ''" @click="fleterClick(item, index)">
        {{ item.name }}
        <i :class="item.check ? 'iconfont icon-duigou-01' : ''"></i>
      </div>
    </div>
    <!-- 筛选 -->
    <div v-if="isfilterMask" class="isfilterMask">
      <!-- 商家服务 -->
      <div class="filter-list" v-for="(item, index) in filterData.screenBy" :key="index">
        <div class="title">{{ item.title }}</div>
        <div class="content">
          <div v-for="(val, idx) in item.data" :key="idx" @click="selectFilter(val, item)" :class="{ isSelect: val.select }">
            <img :src="val.icon" v-if="val.icon" />
            {{ val.name }}
          </div>
        </div>
      </div>
      <!-- 操作 -->
      <div class="action">
        <div class="empty" :class="{ isEmpty: isEmpty }" @click="empty()">
          清空
        </div>
        <div class="confirm" @click="handleOk()">确定</div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  props: {
    filterData: Object,
    filterVisible: Boolean,
    isfilterMask: Boolean, //筛选
  },
  name: 'FilterView',
  data () {
    return {
      currentIndex: 0,
      isMask: false,
    }
  },

  created () { },
  watch: {
    filterVisible (newValue, oldValue) {
      // console.log('newValue', newValue);
    },
  },
  computed: {
    isEmpty () {
      console.log(this.filterData.screenBy)
      let count = 0
      this.filterData.screenBy.forEach((item) => {
        item.data.forEach((val) => {
          if (val.select) {
            count++
          }
        })
      })
      if (count > 0) {
        return true
      }
    },
  },
  methods: {
    handleClick (item, index) {
      if (item.condition) {
        this.$emit('update', item.condition)
      }
      this.isMask = true
      if (index == 1 || index == 2) {
        this.isMask = false
      }
      this.currentIndex = index
      this.$emit('handleClick', index)
    },
    /* 点击list操作 */
    fleterClick (item, index) {
      this.$emit('fleterClick', item, index)
      this.$emit('update', item)
      this.isMask = false
    },
    /* 点击蒙版 */
    canleMask () {
      this.isMask = false
      this.$emit('handleCanle', false)
    },

    /* 点击筛选 */
    selectFilter (val, item) {

      console.log(val, item)
      if (item.id !== 'MPI') {
        item.data.forEach((ele) => {
          ele.select = false
        })
      }
      val.select = !val.select
    },

    /* 清空 */
    empty () {
      this.$emit('empty')
    },

    /* 确定 */
    handleOk () {
      this.filterData.screenBy[1].data[0].code = 'shoudan'
      let reqObj = {
        MPI: '',
        offer: '',
        per: '',
      }
      let mpiStr = ''
      this.filterData.screenBy.forEach((screenBy) => {
        screenBy.data.forEach((item) => {
          if (item.select) {
            if (screenBy.id != 'MPI') {
              //多选
              reqObj[screenBy.id] = item.code
            } else {
              //单选
              mpiStr += item.code + ','
              reqObj[screenBy.id] = mpiStr
            }
          }
        })
      })
      this.$emit('update', reqObj)
      this.canleMask()
    },
  },
}
</script>
<style scoped>
.filter {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgb(80, 80, 80);
  background-color: #fff;
  padding: 0.3rem 0.5rem;
  font-size: 0.25rem;
  border-bottom: 0.06rem solid rgb(194, 193, 193);
}
.filter i {
  font-size: 0.15rem;
}
.active {
  font-weight: 550;
}
.filter-visible {
  z-index: 999999999 !important;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.466);
}
.filter-visible .list {
  height: 1rem;
  line-height: 1rem;
  background-color: #fff;
  padding: 0.1rem 0.9rem;
  font-size: 0.3rem;
}
.filter-list {
  padding: 0.1rem 0.9rem;
}
.filter-visible .list i {
  position: absolute;
  right: 0.8rem;
}
.colorActive {
  color: #1e99eb;
  font-weight: 550;
}
.filterMask {
  width: 100%;
  background-color: #fff;
}
.isfilterMask {
  background-color: #fff;
  /* padding: 0.1rem 0.9rem; */
}
.isfilterMask .title {
  color: #4e4d4d;
  font-size: 0.3rem;
  margin-top: 0.4rem;
}
.isfilterMask .content {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.4rem;
}
.content img {
  width: 15%;
  vertical-align: middle;
  margin-bottom: 0.05rem;
  margin-right: 0.05rem;
}
.isfilterMask .content div {
  width: 30%;
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
  background-color: #f9f9f9;
  justify-content: space-between;
  color: #4e4d4d;
  font-size: 0.25rem;
  margin-top: 0.2rem;
  margin-right: 0.2rem;
}
.action {
  display: flex;
  margin-top: 0.5rem;
}
.action div {
  flex: 1;
  height: 1.2rem;
  background-color: #ffffff;
  text-align: center;
  line-height: 1.2rem;
  width: 2rem;
}
.action .empty {
  border-top: 0.05rem solid #ccc;
  color: #dfdfdf;
}
.action .confirm {
  border-top: 0.05rem solid #05d15a;
  background-color: #05d15a;
  color: #f9f9f9;
}
.isSelect {
  background-color: #ecf4ff !important;
  color: #1e99eb !important;
}
.isEmpty {
  color: #4d4b4b !important;
}
</style>
